<template>
	<div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<header></header>
				<section>
					<van-cell-group class="input-group">
						<van-field v-model.trim="userName" placeholder="请输入用户名" class="input" maxlength="250" />
						<div class="pass">
							<!-- <van-field v-model.trim="password" placeholder="请输入密码" class="input" maxlength="18" type="text" v-if="checked" /> -->
							<!-- <van-field v-model.trim="password" placeholder="请输入密码" class="input" maxlength="18" type="password"  v-else /> -->
							<van-field v-model.trim="password" placeholder="请输入密码" class="input" maxlength="18" :type="checked?'text':'password'"  />
							<van-icon :size="18" :name="passVis?'eye-o':'closed-eye'" class="visible" @click="changeVis" />
						</div>
					</van-cell-group>
					<div class="bottom">
						<div>
							<router-link to="/findPass" class="forget">忘记密码？</router-link>
						</div>
						<!--<div class="tip">账号不存在，请联系管理员</div>-->
						<div class="row-justify-content login-wrap">
							<div class="column-space-between">
								<van-button type="info" class="login" @click="Login" :loading="loading">登录</van-button>
								<router-link to="/register">注册</router-link>
							</div>
						</div>
						<div class="read">
							<img v-if="checkImg" src="../assets/images/checked.png" @click="choose" />
							<img v-else src="../assets/images/check.png" @click="choose" /> 同意协议并且登录
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>
</template>

<script>
	import { base } from './../utils/api';
	let _this;
	export default {
		data() {
			return {
				userName: '',
				password: '',
				loading: false,
				checkImg: false,
				checked: false,
				passVis: false // 密码是否可见
			};
		},
		beforeCreate() {
			_this = this;
		},
		components: {},
		methods: {
			choose() {
				this.checkImg = !this.checkImg;
			},
			changeVis() {
				this.passVis = !this.passVis;
				if(this.checked != true) {
					this.checked = true;
				} else {
					this.checked = false;
				}
			},
			Login() {
				if(!this.userName) {
					this.$toast('用户名不能为空');
					return false;
				} else {
					if(this.userName.length < 4 || this.userName.length > 250) {
						this.$toast('用户名长度为4到250位');
						return false;
					}
				}
				if(!this.password) {
					this.$toast('密码不能为空');
					return false;
				} else {
					if(this.password.length < 6 || this.password.length > 18) {
						this.$toast('密码长度为6到18位');
						return false;
					}
				}
				if(!this.checkImg) {
					this.$toast('请同意登录协议');
					return false;
				}
				this.loading = true;
				this.axios.defaults.headers['Authorization'] = 'mNrNeheLd2NTCxBkgxMASrkNyB4Mb9wRk2qQX2Q5H6h6Q/++ayEFo2o+2IDPV1m0nWbPPFbt3b/rZwAUvMydsmQW+xQ+dLJTzOjlz9tQNKKSC+2iV+1UUiUW74QP3BQBPbyfH/1qdKuwOeXplyjLv3nmWiDys9CCMxPjhDU/qyA=';
				base.getSignUp({
					'username': this.userName,
					'password': this.password
				}).then(res => {
					if(res.code == 8008) {
						sessionStorage.token = res.data.access_token;
						sessionStorage.userName = this.userName;
						localStorage.setItem("userName", this.userName);
						this.axios.defaults.headers['Authorization'] = 'bearer ' + sessionStorage.token;
						this.$router.push({
							path: '/'
						})
					}
					this.loading = false;
					this.$toast(res.msg);
				})
			}
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			password: function() {
				this.password = this.password.replace(/[\u4e00-\u9fa5]/ig, ''); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			userName: function() {
				this.userName = this.userName.replace(/[\u4e00-\u9fa5]/ig, ''); // 帐号不能输入中文
			}
		}
	};
</script>

<style lang="scss" scoped>
	header {
		background: url(../assets/images/loginbg.png) no-repeat;
		background-size: 100%;
		height: 40vh;
	}
	
	section {
		padding-right: 18px;
		box-sizing: border-box;
		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			border-top: none;
			border-bottom: none;
		}
		.van-cell-group {
			.input {
				padding-left: 21px;
				font-size: 13px;
			}
			div:last-child::after {
				position: absolute;
				box-sizing: border-box;
				content: " ";
				pointer-events: none;
				right: 0;
				bottom: 0;
				left: 16px;
				border-bottom: 1px solid #ebedf0;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}
			.pass {
				position: relative;
			}
		}
		.visible {
			position: absolute;
			top: 16px;
			right: 5px;
			color: #d0d0d0;
		}
		.bottom {
			div:nth-child(1) {
				text-align: right;
				.forget {
					margin-top: 10px;
					display: inline-block;
					color: #d0d0d0;
					font-size: 12px;
				}
			}
			.tip {
				font-size: 10px;
				color: #666666;
				width: 150px;
				height: 20px;
				line-height: 20px;
				background: #f1efef;
				text-align: center;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 20px;
				margin-bottom: 50px;
			}
			.login-wrap {
				height: 80px;
				a {
					color: #3895fd;
					font-size: 12px;
					text-align: center;
				}
				.login {
					border-radius: 20px;
					width: 171px;
					height: 40px;
				}
			}
			.read {
				width: 130px;
				margin: 0 auto;
				margin-top: 60px;
				color: #b8c2cb;
				font-size: 12px;
				img {
					width: 14px;
					height: 14px;
					vertical-align: -2px;
					margin-right: 5px;
				}
			}
		}
	}
</style>